import React, { Component } from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { InputItem, Picker, List, Flex, Button, WhiteSpace, WingBlank, Modal } from 'antd-mobile'
import color from '../../libs/color'
import HTTP from '../../libs/HTTP'
import { judgeIsRegister, smsPush, smsVerify } from '../../libs/api'
import { BackIcon } from '../../widget'
import screen from '../../libs/screen'

const alert = Modal.alert

export default class extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: '注册',
    headerStyle:{ backgroundColor: color.theme},
    headerTitleStyle:{ color: 'white', fontSize: 20 },
    headerLeft: ( <BackIcon backInvoke={() => { navigation.goBack(null) }}/>),
  })
  constructor(props) {
    super(props)
    this.pickerData = [
      {
        label: '+86',
        value: '0',
      }
    ]
    this.state = {
      phone: '',
      bizId: '',
      verifyCode: '',
      showNextStep: false,
      lastTime: 0
    }
  }

  renderBtn() {
    if(this.state.lastTime == 0 ) {
      return (
        <Button style={{borderRadius: 0}} type="primary" onClick={this.judgeSendSmsMsg}>获取短信验证码</Button>
      )
    } else {
      return (
        <Button style={{borderRadius: 0}} type="primary" disabled>获取短信验证码({this.state.lastTime})</Button>
      )
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <WingBlank>
          <View style={styles.tip}><Text>验证码会以短信的形式发送到您的手机上</Text></View>
          <Flex style={{backgroundColor: 'white'}}>
            <Flex.Item style={{flex: 3}}>
              <Picker  cols={1} value={['0']} data={this.pickerData} >
                <List.Item arrow="down">代码</List.Item>
              </Picker>
            </Flex.Item>
            <Flex.Item style={{flex: 5}}><InputItem clear onChange={(v) => {this.setState({phone: v})}} value={this.state.phone} style={{paddingTop: 10}} placeholder="手机号码"/></Flex.Item>
          </Flex>
          <WhiteSpace />
          {
            this.renderBtn()
          }
          <WhiteSpace />
          <WhiteSpace />
          {
            this.state.showNextStep && (
              <View>
                <View style={{backgroundColor: 'white'}}>
                  <InputItem placeholder="请输入验证码" onChange={(v) => {this.setState({verifyCode: v})}} value={this.state.verifyCode} >验证码</InputItem>
                </View>
                <WhiteSpace />
                <Button style={{borderRadius: 0}} onClick={this.judgeNextStep}>下一步</Button>
              </View>
            )
          }
        </WingBlank>
      </View>
    )
  }

  //下一步
  judgeNextStep = () => {
    var params = {code: this.state.verifyCode}
    HTTP.post(smsVerify(), {"domain": "winder", code: this.state.verifyCode, mobile: this.state.phone, bizId: this.state.bizId}, () =>{ }, () => {
      this.props.navigation.navigate('Register', {
        phone: this.state.phone
      })
    }, () => {
      alert('验证码校验失败');
    })
  }

  //发送验证码
  sendMsg = () => {
    HTTP.post(smsPush(), {"type": "verifyCode", "mobile": this.state.phone, "domain": "winder", "signName": "winder科技", "templateCode": "SMS_112475212"}, () => {}, (resp) => {
      this.setState({
        showNextStep: true,
        bizId: resp
      })
    })

  }

  //发送验证码前判断
  judgeSendSmsMsg = () => {
    if(this.state.phone == '') {
      alert('请输入手机号')
      return false;
    }
    HTTP.post(judgeIsRegister(), { "telephone": this.state.phone, "appDomain": "WINDER-DEALER"}, () => {}, (resp) => {
      this.startTimer()
      this.sendMsg()
    })
  }

  startTimer = () => {
    this.setState({
      lastTime: 60
    }, () => {
      let timeout = setInterval(() => {
        console.log("time is going..", this.state.lastTime)
        if(this.state.lastTime == 1) {
          clearInterval(timeout);
        }
        this.setState({
          lastTime: this.state.lastTime - 1
        })
      }, 1000)
    })
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  tip: {
    paddingVertical: 10
  },
  phonearea: {
    flex: 1,
    flexDirection: 'column'
  }
})
